<template>
  <div class="home">
    <top class="wow fadeInDown" title="智慧运维视频监控智能分析系统"></top>
    <div class="homeMain">
      <item>
        <div class="pageInner">
          <breadcrumb>
            <el-breadcrumb-item>组织机构管理</el-breadcrumb-item>
          </breadcrumb>
          <div class="searchTop">
            <div class="searchl">
              <!-- 标题和日期选择 -->
              <div class="searchls">
                <span class="label2">状态：</span>
                <el-select clearable v-model="status" placeholder="请选择" class="selectOrganization">
                  <el-option
                      v-for="item in statusList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
              </div>
              <!-- 标题和关键词输入 -->
              <div class="searchls">
                <span class="label">手机号码：</span>
                <el-input v-model="phone" placeholder="请输入手机号码"></el-input>
              </div>
              <wButton class="ml20 wow fadeInDown"
                       icon="icon-search"
                       bgColor="rgba(11, 42, 74, 1.00)"
                       boxShadowColor="rgba(16, 103, 160, 1.00)"
                       name="搜索" data-wow-delay="0.1s" @click="handleSearch"></wButton>
              <wButton class="ml20 wow fadeInDown"
                       icon="icon-reset"
                       bgColor="rgba(11, 42, 74, 1.00)"
                       boxShadowColor="rgba(16, 103, 160, 1.00)"
                       name="重置" data-wow-delay="0.1s" @click="reSet"></wButton>
              <wButton class="ml20 wow fadeInDown"
                       icon="icon-add-bold"
                       bgColor="rgba(11, 42, 74, 1.00)"
                       boxShadowColor="rgba(16, 103, 160, 1.00)"
                       name="新增" data-wow-delay="0.1s" @click="goAdd"></wButton>
            </div>

          </div>
          <div class="pageInnerData">
            <el-table
                :data="list"
                row-key="id"
                height="100%"
            >
              <el-table-column
                  prop="id"
                  label="部门id"
                  align="center"
              >
              </el-table-column>
              <el-table-column
                  prop="orgName"
                  label="部门名称"
                  align="center"
              >
              </el-table-column>
              <el-table-column
                  prop="sortOrder"
                  align="center"
                  label="排序"
              >
              </el-table-column>
              <el-table-column
                  prop="status"
                  align="center"
                  label="状态">
                <template #default="scope">
                  <span :class="scope.row.status === 0 ? 'status-disabled' : 'status-enabled'">
                      {{ scope.row.status === 0 ? '禁用' : '启用' }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                  prop="createTime"
                  align="center"
                  label="创建时间">
              </el-table-column>
              <el-table-column
                  prop="operationContent"
                  align="center"
                  width="200"
                  label="操作">
                <template #default="scope">
                  <div class="operationContent">
                    <div class="deleteInfo" @click="goEdit(scope.row)">
                      <i
                         class="icon iconfont icon-bianji"></i>
                      <span>编辑</span>
                    </div>
                    <el-popconfirm
                        title="确定要删除吗?"
                        @confirm="confirmDelete(scope.row.id)"
                    >
                      <template #reference>
                        <div class="deleteInfo">
                          <i
                              class="icon iconfont icon-shanchu"></i>
                          <span>删除</span>
                        </div>
                      </template>
                    </el-popconfirm>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div class="pagination">
              <el-pagination
                  background
                  @current-change="handlePageChange"
                  layout="prev, pager, next"
                  :total="total">
              </el-pagination>
            </div>
          </div>
        </div>
      </item>
    </div>
    <videoBg></videoBg>
    <pop title="添加组织机构" popHeight="650px" ref="add">
      <add @saveData="closePop('add')"></add>
    </pop>
    <pop title="编辑组织机构" popHeight="650px" ref="edit">
      <edit @saveData="closePop('edit')"></edit>
    </pop>
  </div>
</template>

<script>
import top from "../../components/top/index.vue";
import videoBg from "@/components/videoBg/index.vue";
import item from "@/components/item2/index.vue";
import WOW from "wow.js";
import {organizations} from "../../api/api/LargeScreenData.js";
import breadcrumb from "../../components/breadcrumb/index.vue";
import wButton from "@/components/wButton/index.vue";
import pop from "@/components/pop/pop.vue";
import add from "./components/add.vue";
import edit from "./components/edit.vue";

export default {
  data() {
    return {
      total: 0,
      list: [],
      page: 1,
      startDate: '',
      endDate: '',
      keyword: '',
      user: '',
      phone: '',
      status: '',
      statusList: [{
        value: 1,
        label: '状态1'
      }, {
        value: 2,
        label: '状态2'
      },]
    }
  },
  components: {
    top,
    videoBg,
    item,
    breadcrumb,
    wButton,
    pop,
    add,
    edit
  },
  mounted() {
    var wow = new WOW({
      boxClass: "wow",
      animateClass: "animated",
    });
    wow.init();
    this.getData()
  },
  methods: {
    goAdd() {
      // 使用Vue Router进行页面跳转
      this.$refs.add.getShow();
    },
    confirmDelete(idToDelete) {
      this.list = this.list.filter(item => item.id !== idToDelete);
      this.$message({
        message: '操作成功',
        type: 'success',
        duration: 3000  // 这是显示消息的持续时间，单位为毫秒。这行是可选的。
      });
    },
    reSet() {
      this.organization = ''
      this.startDate = ''
      this.endDate = ''
      this.user = ''
      this.phone = ''
    },
    // 搜索
    handleSearch() {
      this.page = 1
      this.getData()
    },
    // 触发隐藏的文件输入的点击事件
    triggerFileInput() {
      this.$refs.fileInput.click();
    },
    closePop(popRef) {
      // 使用$refs访问指定的pop组件并调用其getShow方法
      if (this.$refs[popRef]) {
        this.$refs[popRef].getHide();
      }
    },
    goEdit(organizationData) {
      // 执行任何你原来goEdit的操作
      localStorage.setItem('organizationData', JSON.stringify(organizationData));
      // 然后调用ref="edit"的getShow方法
      this.$refs.edit.getShow();
    },
    // 处理选中的文件
    handleFile(event) {
      const selectedFile = event.target.files[0];
      if (selectedFile) {
        // 这里你可以处理选中的文件，例如读取其内容或上传到服务器
        console.log(selectedFile);
      }
    },
    handlePageChange(newPage) {
      // 触发接口请求
      this.page = newPage
      this.getData()
    },
    async getData() {
      try {
        const res = await organizations({page: this.page});
        this.list = res.data.list;
        this.total = res.data.total;
      } catch (err) {
        console.error(err);
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  position: fixed;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  flex-direction: column;
}

.homeMain {
  position: relative;
  width: calc(100% - 60px);
  height: calc(100% - 160px);
  margin-top: 140px;
  display: flex;
  margin-left: 30px;
  z-index: 1;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;

  .pageInner {
    width: 100%;
    position: relative;
    height: 100%;

    .set {
      font-size: 28px;
      cursor: pointer;
      color: #1ebffd;
    }

    .breadcrumb {
      width: calc(100% - 40px);
      margin-left: 20px;
      position: relative;
      height: 40px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;
    }

    .pageInnerData {
      position: relative;
      width: calc(100% - 40px);
      margin: 10px auto;
      height: calc(100% - 160px);
    }
  }
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  height: 50px;
}

.detail {
  width: 100%;
  height: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;

  img {
    width: 60px;
    height: 60px;
  }
}

.searchTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  margin-left: 20px;
  margin-right: 20px;
  height: 60px;

  .searchl {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
    color: #82b3db;
    font-size: 14px;

    .searchls {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;
    }

    .label {
      margin-right: 10px;
      margin-left: 10px;
      font-size: 14px;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .label2 {
      margin-right: 10px;
      flex-shrink: 0;
    }

    .selectOrganization{
      width: 100px;
    }


  }

  .searchr {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
  }
}

.exportBut {
  background: url("./assets/butbg2.png");
  width: 105px;
  height: 42px;
  cursor: pointer;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  margin-bottom: -5px;

  span {
    padding-bottom: 5px;
    font-size: 14px;
  }
}

.rotate-icon {
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
}

.rotate-icon:hover {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-transition: transform 0.3s ease;
  transition: transform 0.3s ease;
}

.ml10 {
  margin-left: 10px;
}

.ml20 {
  margin-left: 20px;
}

.deleteInfo {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  cursor: pointer;
  margin-left: 10px;
  margin-right: 10px;
  align-content: flex-start;

  span {
    font-size: 14px;
  }

  i {
    margin-right: 10px;
    font-size: 16px;
  }
}

.operationContent {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
}

//.status-enabled {
//  color: green;
//}

.status-disabled {
  color: red;
}
</style>
